<template>
	<view class="main">
		<uv-sticky bgColor="#fff" ref="backTop" top="300">
			<view class="sv">
				<uv-search v-model="searchValue" @search="fillterSearch" @change='fillterSearch' placeholder="搜索科室名"
					:animation="true"></uv-search>
			</view>
		</uv-sticky>

		<view class="lv">
			<view class="lvi" v-for="(i,o) in mainListF" key="o" @click="openChooseDoctor(i.id)">
				<img :src="i.icon" alt="" />
				<view class="lvit">{{i.name}}</view>
			</view>
		</view>

		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>
	</view>
</template>

<script>
	export default {
		// name: '预约挂号',
		data() {
			return {
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				scrollTop: 0,
				searchValue: '',
				mainList: [],
				mainListF: [],
				mainType: null,
			}
		},
		onLoad(o) {
			this.mainType = o.type
		},
		mounted() {
			this.mainList = [{
						name: '妇科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970186197ff80808195d597d901964853fdd50068.png'
					},
					{
						name: '产科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970176985ff80808195d597d901964853d9d90067.png'
					},
					{
						name: '儿科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970166379ff80808195d597d901964853b06b0066.png'
					},
					{
						name: '骨科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970156223ff80808195d597d90196485388bf0065.png'
					},
					{
						name: '肿瘤科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970146549ff80808195d597d90196485362f50064.png'
					},
					{
						name: '内科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970137964ff80808195d597d901964853416c0063.png'
					},
					{
						name: '外科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970129618ff80808195d597d90196485320d20062.png'
					},
					{
						name: '药剂科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970121717ff80808195d597d90196485301f50061.png'
					},
					{
						name: '感染科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970111150ff80808195d597d901964852d8ae0060.png'
					},
					{
						name: '病理科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970102611ff80808195d597d901964852b753005f.png'
					},
					{
						name: '口腔科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970089025ff80808195d597d9019648528241005e.png'
					},
					{
						name: '精神科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970080816ff80808195d597d9019648526230005d.png'
					},
					{
						name: '麻醉科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970071744ff80808195d597d9019648523ec0005c.png'
					},
					{
						name: '重症医学科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970064296ff80808195d597d90196485221a8005b.png'
					},
					{
						name: '全科医疗科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970055392ff80808195d597d901964851fee0005a.png'
					},
					{
						name: '皮肤科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970043756ff80808195d597d901964851d16c0059.png'
					},
					{
						name: '耳鼻喉科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970035053ff80808195d597d901964851af6d0058.png'
					},
					{
						name: '急诊',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970025547ff80808195d597d9019648518a4b0057.png'
					},
					{
						name: '影像科',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970006413ff80808195d597d9019648513f8d0055.png'
					},
					{
						name: '护理门诊',
						id: 1,
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970015589ff80808195d597d90196485163650056.png'
					},
				],

				this.mainListF = [...this.mainList]
			this.mainListF = [...this.mainList]
		},
		methods: {
			openChooseDoctor(id) {
				uni.navigateTo({
					url: `/pages/AppointmentRegistration/chooseDoctor?type=${this.mainType}&id=${id}`
				})
			},
			fillterSearch() {
				if (this.searchValue) {
					this.mainListF = this.mainList.filter(i => i.name.indexOf(this.searchValue) > -1)
				} else {
					this.mainListF = [...this.mainList]
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;
		min-height: 100vh;

		.sv {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
		}

		.lv {
			padding-bottom: 40rpx;
			.lvi {
				background-color: #fff;
				height: 80rpx;
				margin-bottom: 5rpx;
				line-height: 80rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>